<!--
 * @Author: your name
 * @Date: 2021-09-23 14:38:17
 * @LastEditTime: 2021-10-20 18:15:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /admin/src/components/GlobalHeader/AvatarDropdown.vue
-->
<template>
    <div>
        <a-badge :count="$store.state.user.count" @click="onClickMessage">
            <a-icon type="bell" :style="{ fontSize: '24px', marginRight: '30px' }" />
        </a-badge>
        <a-dropdown v-if="currentUser && currentUser.name" placement="bottomRight">
            <span class="ant-pro-account-avatar">
                <!-- <a-badge :count="$store.state.user.count" @click="onClickMessage"> -->
                <img src="@/assets/logo.png" class="avatar" />
                <!-- </a-badge> -->
                <span>{{ currentUser.name }}</span>
            </span>
            <template v-slot:overlay>
                <a-menu class="ant-pro-drop-down menu" :selected-keys="[]">
                    <!-- <a-menu-item v-if="menu" key="center" @click="handleToCenter">
                    <a-icon type="user" />
                    {{ $t('menu.account.center') }}
                </a-menu-item>
                <a-menu-item v-if="menu" key="settings" @click="handleToSettings">
                    <a-icon type="setting" />
                    {{ $t('menu.account.settings') }}
                </a-menu-item>
                <a-menu-divider v-if="menu" /> -->
                    <a-menu-item key="logout" @click="handleLogout">
                        <a-icon type="logout" />
                        {{ $t('menu.account.logout') }}
                    </a-menu-item>
                </a-menu>
            </template>
        </a-dropdown>
        <span v-else>
            <a-spin size="small" :style="{ marginLeft: 8, marginRight: 8 }" />
        </span>
        <Modal :visible.sync="visible" title="订单修改日志" width="80%">
            <a-table
                :columns="columns"
                :data-source="data"
                :rowKey="rowKey"
                :pagination="pagination"
                @change="onChangePage"
            >
                <template slot="createTime" slot-scope="text">
                    <span>
                        {{ text | moment }}
                    </span>
                </template>
                <template slot="action" slot-scope="text, record">
                    <a-button type="link" @click="onClickRead(record)" v-if="record.read == 0">已读</a-button>
                </template>
            </a-table>
        </Modal>
    </div>
</template>

<script>
import { Modal } from 'ant-design-vue'
import { findOrderLogList, readOrderLog } from '@/api/order'

export default {
    name: 'AvatarDropdown',
    props: {
        currentUser: {
            type: Object,
            default: () => null
        },
        menu: {
            type: Boolean,
            default: true
        }
    },
    data: function() {
        return {
            visible: false,
            data: [],
            page: {
                page: 1,
                limit: 10,
                total: 0
            },
            pagination: {
                current: 1,
                pageSize: 10,
                size: 'small',
                hideOnSinglePage: false,
                pageSizeOptions: ['10', '20', '30'],
                showQuickJumper: false,
                showSizeChanger: true,
                total: 0,
                showTotal: (total, range) => {
                    return '总共' + total + '条'
                }
            },
            columns: [
                {
                    dataIndex: 'tid',
                    title: '订单号',
                    align: 'center'
                },
                {
                    dataIndex: 'before',
                    title: '修改前',
                    align: 'center'
                },
                {
                    dataIndex: 'after',
                    title: '修改后',
                    align: 'center'
                },
                {
                    dataIndex: 'action.username',
                    title: '操作人',
                    align: 'center'
                },
                {
                    dataIndex: 'createTime',
                    title: '修改时间',
                    align: 'center',
                    scopedSlots: { customRender: 'createTime' }
                },
                {
                    dataIndex: 'action',
                    title: '操作',
                    align: 'center',
                    scopedSlots: { customRender: 'action' }
                }
            ]
        }
    },
    methods: {
        handleToCenter() {
            this.$router.push({ path: '/account/center' })
        },
        handleToSettings() {
            this.$router.push({ path: '/account/settings' })
        },
        handleLogout(e) {
            Modal.confirm({
                title: this.$t('layouts.usermenu.dialog.title'),
                content: this.$t('layouts.usermenu.dialog.content'),
                onOk: () => {
                    // return new Promise((resolve, reject) => {
                    //   setTimeout(Math.random() > 0.5 ? resolve : reject, 1500)
                    // }).catch(() => console.log('Oops errors!'))
                    return this.$store.dispatch('Logout').then(() => {
                        this.$router.push({ name: 'login' })
                    })
                },
                onCancel() {}
            })
        },
        rowKey(items) {
            return items.id
        },
        async onClickMessage() {
            const res = await findOrderLogList(this.page)

            const {
                data: { data, total }
            } = res

            this.data = data

            this.pagination.total = total

            this.visible = true
        },
        onChangePage(page) {
            this.pagination = page
            this.page.page = page.current
            this.page.limit = page.pageSize
            this.onClickMessage()
        },
        async onClickRead(record) {
            const res = await readOrderLog({ id: record.id })

            const {
                message,
                data: { count }
            } = res

            this.$message.success(message)

            this.$store.dispatch('Count', count)

            this.onClickMessage()
        }
    }
}
</script>

<style lang="less" scoped>
.ant-pro-drop-down {
    /deep/ .action {
        margin-right: 8px;
    }
    /deep/ .ant-dropdown-menu-item {
        min-width: 160px;
    }
}
.avatar {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    border-radius: 50%;
    border: 1px solid #ff8a4d;
    margin-right: 10px;
}
/deep/ .ant-badge-count {
    top: 4px;
    right: 20px;
}
</style>
